<!DOCTYPE html>

<html>

<head>
    <title>DSL as a Service</title>
</head>

<body>

    <style>
        body {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 5px;
            bottom: 5px;
            left: 3px;
            right: 5px;
        }
        
        .title {
            text-align: center;
            font-size: 1.5rem;
            color: green;
            margin-top: 10px;
        }
        
        .container,
        .main {
            text-align: center;
            width: 100%;
            height: 100%;
        }
        
        iframe {
            display: inline-block;
            width: 100%;
            height: 100%;
            border-width: 1px;
        }
        
        .code {
            width: 100%;
            height: 50px;
            text-align: left;
        }
        
        .block {
            display: inline-block;
            width: 40%;
            height: 35%;
            margin: 0.3% 2.5%;
        }
        
        .block span {
            text-align: center;
            display: block;
            color: green;
            margin: 10px;
        }
        
        textarea {
            margin-top: 10px;
        }
    </style>
    <div class="container">
        <div class="title">DSL as a Service (iframe嵌入)</div>
        <div class="main">
            <div class="block">
                <span>标题+工具栏</span>
                <iframe src="/mini/dsl.html?code=/git/grammar-repo/opendsl/0.4/demo/demo.dsl&grammar=/git/grammar-repo/opendsl/0.4/DSL.g4&title=%E4%BB%A3%E7%A0%81%EF%BC%88code%EF%BC%89&titleMargin=10&showTool=true"></iframe>
                <textarea class="code"><iframe src="http://dsl.321zou.com/mini/dsl.html?code=/git/grammar-repo/opendsl/0.4/demo/demo.dsl&grammar=/git/grammar-repo/opendsl/0.4/DSL.g4&title=%E4%BB%A3%E7%A0%81%EF%BC%88code%EF%BC%89&titleMargin=10&showTool=true"></iframe></textarea>
            </div>
            <div class="block">
                <span>工具栏</span>
                <iframe src="/mini/dsl.html?code=/git/grammar-repo/opendsl/0.4/demo/demo.dsl&grammar=/git/grammar-repo/opendsl/0.4/DSL.g4&showTool=true"> </iframe>
                <textarea class="code"><iframe src="http://dsl.321zou.com/mini/dsl.html?code=/git/grammar-repo/opendsl/0.4/demo/demo.dsl&grammar=/git/grammar-repo/opendsl/0.4/DSL.g4&titleMargin=10&showTool=true"> </iframe></textarea>
            </div>
            <div class="block">
                <span>标题</span>
                <iframe src="/mini/dsl.html?code=/git/grammar-repo/opendsl/0.4/demo/demo.dsl&grammar=/git/grammar-repo/opendsl/0.4/DSL.g4&title=%E4%BB%A3%E7%A0%81%EF%BC%88code%EF%BC%89&titleMargin=10"></iframe>
                <textarea class="code"><iframe src="http://dsl.321zou.com/mini/dsl.html?code=/git/grammar-repo/opendsl/0.4/demo/demo.dsl&grammar=/git/grammar-repo/opendsl/0.4/DSL.g4&title=%E4%BB%A3%E7%A0%81%EF%BC%88code%EF%BC%89&titleMargin=10"></iframe></textarea>
            </div>

            <div class="block">
                <span>无标题+无工具栏</span>
                <iframe src="/mini/dsl.html?code=/git/grammar-repo/opendsl/0.4/demo/demo.dsl&grammar=/git/grammar-repo/opendsl/0.4/DSL.g4"> </iframe>
                <textarea class="code"><iframe src="http://dsl.321zou.com/mini/dsl.html?code=/git/grammar-repo/opendsl/0.4/demo/demo.dsl&grammar=/git/grammar-repo/opendsl/0.4/DSL.g4"></iframe></textarea>
            </div>
        </div>
    </div>


    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?a44a91faad51b8b8a6abefeedf894dac";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</body>

</html>